<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI智能助理悬浮窗 v2.0 - 演示页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        color: #333;
        overflow-x: hidden;
      }

      .header {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        padding: 2rem 0;
        text-align: center;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      .header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
      }

      .header p {
        font-size: 1.2rem;
        opacity: 0.9;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
      }

      .demo-section {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      }

      .demo-section h2 {
        color: #4f46e5;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .control-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
      }

      .control-group {
        background: #f8fafc;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
      }

      .control-group h3 {
        margin-bottom: 1rem;
        color: #1e293b;
        font-size: 1.1rem;
      }

      .form-group {
        margin-bottom: 1rem;
      }

      .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: #374151;
      }

      .form-group input,
      .form-group select {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        transition: border-color 0.2s ease;
      }

      .form-group input:focus,
      .form-group select:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
      }

      .btn {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
      }

      .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
      }

      .btn-secondary {
        background: linear-gradient(135deg, #6b7280, #4b5563);
      }

      .btn-danger {
        background: linear-gradient(135deg, #ef4444, #dc2626);
      }

      .btn-success {
        background: linear-gradient(135deg, #10b981, #059669);
      }

      .presets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }

      .preset-card {
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .preset-card:hover {
        border-color: #4f46e5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
      }

      .preset-card.active {
        border-color: #4f46e5;
        background: #f0f9ff;
      }

      .preset-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .preset-card h4 {
        margin-bottom: 0.5rem;
        color: #1e293b;
      }

      .preset-card p {
        color: #64748b;
        font-size: 0.875rem;
      }

      .demo-info {
        background: #eff6ff;
        border: 1px solid #dbeafe;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
      }

      .demo-info h4 {
        color: #1e40af;
        margin-bottom: 0.5rem;
      }

      .demo-info p {
        color: #1e3a8a;
        margin-bottom: 0.5rem;
        line-height: 1.5;
      }

      .demo-info code {
        background: #f1f5f9;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.875rem;
      }

      .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
      }

      .status-active {
        background: #d1fae5;
        color: #065f46;
      }

      .status-inactive {
        background: #fee2e2;
        color: #991b1b;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
      }

      @media (max-width: 768px) {
        .header h1 {
          font-size: 2rem;
        }

        .container {
          padding: 1rem;
        }

        .control-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>🤖 AI智能助理悬浮窗 v2.0</h1>
      <p>简洁美观 · 纯CSS图标 · 多种风格</p>
    </div>

    <div class="container">
      <!-- 当前状态 -->
      <div class="demo-section">
        <h2>📊 当前状态</h2>
        <div id="currentStatus" class="status-indicator status-inactive">
          <div class="status-dot"></div>
          <span>未初始化</span>
        </div>
      </div>

      <!-- 快速开始 -->
      <div class="demo-section">
        <h2>🚀 快速开始</h2>
        <div class="control-grid">
          <div class="control-group">
            <h3>基本配置</h3>
            <div class="form-group">
              <label for="token">访问令牌 *</label>
              <input type="text" id="token" placeholder="请输入您的访问令牌" value="" />
            </div>
            <div class="form-group">
              <label for="datasetId">数据集ID</label>
              <input type="text" id="datasetId" placeholder="可选，指定数据集ID" />
            </div>
            <button class="btn" onclick="initBasic()">基础初始化</button>
          </div>

          <div class="control-group">
            <h3>位置和大小</h3>
            <div class="form-group">
              <label for="position">位置</label>
              <select id="position">
                <option value="bottom-right">右下角</option>
                <option value="bottom-left">左下角</option>
                <option value="top-right">右上角</option>
                <option value="top-left">左上角</option>
              </select>
            </div>
            <div class="form-group">
              <label for="size">图标大小 (px)</label>
              <input
                type="range"
                id="size"
                min="48"
                max="96"
                value="64"
                oninput="updateSizeDisplay(this.value)"
              />
              <small id="sizeDisplay">64px</small>
            </div>
            <div class="form-group">
              <label for="offsetX">水平偏移 (px)</label>
              <input type="number" id="offsetX" value="40" min="10" max="200" />
            </div>
            <div class="form-group">
              <label for="offsetY">垂直偏移 (px)</label>
              <input type="number" id="offsetY" value="40" min="10" max="200" />
            </div>
            <button class="btn" onclick="updatePosition()">更新位置</button>
          </div>

          <div class="control-group">
            <h3>聊天窗口尺寸</h3>
            <div class="form-group">
              <label for="modalWidth">窗口宽度 (px)</label>
              <input type="number" id="modalWidth" value="1100" min="300" max="1400" />
            </div>
            <div class="form-group">
              <label for="modalHeight">窗口高度 (px)</label>
              <input type="number" id="modalHeight" value="800" min="400" max="1000" />
            </div>
            <button class="btn" onclick="updateModalSize()">更新窗口大小</button>
          </div>
        </div>
      </div>

      <!-- 图标风格预设 -->
      <div class="demo-section">
        <h2>🎨 图标风格预设</h2>
        <div class="presets-grid">
          <div class="preset-card" onclick="applyPreset('robot', 'gradient', '#667eea', '#764ba2')">
            <div class="preset-icon" style="background: linear-gradient(135deg, #667eea, #764ba2)">
              🤖
            </div>
            <h4>机器人 (默认)</h4>
            <p>经典机器人头像，眨眼动画</p>
          </div>

          <div class="preset-card" onclick="applyPreset('chat', 'gradient', '#10B981', '#059669')">
            <div class="preset-icon" style="background: linear-gradient(135deg, #10b981, #059669)">
              💬
            </div>
            <h4>对话气泡</h4>
            <p>聊天气泡，打字动画效果</p>
          </div>

          <div class="preset-card" onclick="applyPreset('ai', 'solid', '#8B5CF6', '')">
            <div class="preset-icon" style="background: #8b5cf6">AI</div>
            <h4>AI文字</h4>
            <p>简洁的AI文字标识</p>
          </div>

          <div class="preset-card" onclick="applyPreset('brain', 'outline', '#F59E0B', '')">
            <div
              class="preset-icon"
              style="background: white; border: 3px solid #f59e0b; color: #f59e0b"
            >
              🧠
            </div>
            <h4>智慧大脑</h4>
            <p>大脑图标，轮廓风格</p>
          </div>
        </div>
      </div>

      <!-- 主题和颜色 -->
      <div class="demo-section">
        <h2>🌈 主题和颜色</h2>
        <div class="control-grid">
          <div class="control-group">
            <h3>主题风格</h3>
            <div class="form-group">
              <label for="theme">主题类型</label>
              <select id="theme">
                <option value="gradient">渐变背景</option>
                <option value="solid">纯色背景</option>
                <option value="outline">轮廓边框</option>
              </select>
            </div>
            <div class="form-group">
              <label for="iconType">图标类型</label>
              <select id="iconType">
                <option value="robot">机器人</option>
                <option value="chat">对话气泡</option>
                <option value="ai">AI文字</option>
                <option value="brain">智慧大脑</option>
              </select>
            </div>
          </div>

          <div class="control-group">
            <h3>颜色配置</h3>
            <div class="form-group">
              <label for="primaryColor">主色调</label>
              <input type="color" id="primaryColor" value="#667eea" />
            </div>
            <div class="form-group">
              <label for="secondaryColor">次色调 (渐变)</label>
              <input type="color" id="secondaryColor" value="#764ba2" />
            </div>
            <button class="btn" onclick="updateTheme()">应用主题</button>
          </div>
        </div>
      </div>

      <!-- 高级设置 -->
      <div class="demo-section">
        <h2>⚙️ 高级设置</h2>
        <div class="control-grid">
          <div class="control-group">
            <h3>行为设置</h3>
            <div class="form-group">
              <label> <input type="checkbox" id="draggable" checked /> 允许拖拽 </label>
            </div>
            <div class="form-group">
              <label> <input type="checkbox" id="showBadge" checked /> 显示消息徽章 </label>
            </div>
            <div class="form-group">
              <label for="tooltip">提示文本</label>
              <input type="text" id="tooltip" value="AI智能助理 - 点击开始对话" />
            </div>
          </div>

          <div class="control-group">
            <h3>测试功能</h3>
            <button class="btn btn-success" onclick="showBadgeTest()">显示徽章 (5)</button>
            <button class="btn btn-secondary" onclick="hideBadgeTest()">隐藏徽章</button>
            <button class="btn btn-secondary" onclick="toggleAssistant()">切换显示</button>
            <button class="btn btn-danger" onclick="destroyAssistant()">销毁助理</button>
          </div>
        </div>
      </div>

      <!-- 集成路径配置 -->
      <div class="demo-section">
        <h2>🔗 集成路径配置</h2>
        <div class="control-grid">
          <div class="control-group">
            <h3>PC端路径 (推荐)</h3>
            <div class="demo-info">
              <h4>路径：/chat/chat</h4>
              <p>• <strong>适用场景：</strong>桌面端、完整功能聊天界面</p>
              <p>• <strong>功能特点：</strong>完整的会话管理、历史记录、数据集选择</p>
              <p>• <strong>认证方式：</strong>支持token参数自动登录</p>
              <p>• <strong>URL示例：</strong></p>
              <p><code id="pcUrlExample">https://your-domain.com/chat/chat?token=your_token&dataset_id=your_dataset</code></p>
            </div>
            <button class="btn" onclick="updatePcExample()">更新PC端URL示例</button>
            <button class="btn btn-secondary" onclick="copyToClipboard('pcUrlExample')">复制URL</button>
          </div>

          <div class="control-group">
            <h3>移动端路径</h3>
            <div class="demo-info">
              <h4>路径：/embed-chat</h4>
              <p>• <strong>适用场景：</strong>移动端、嵌入式聊天窗口</p>
              <p>• <strong>功能特点：</strong>轻量化界面、专为移动设备优化</p>
              <p>• <strong>认证方式：</strong>必须通过token参数验证，无登录页面</p>
              <p>• <strong>URL示例：</strong></p>
              <p><code id="mobileUrlExample">https://your-domain.com/embed-chat?token=your_token&dataset_id=your_dataset</code></p>
            </div>
            <button class="btn" onclick="updateMobileExample()">更新移动端URL示例</button>
            <button class="btn btn-secondary" onclick="copyToClipboard('mobileUrlExample')">复制URL</button>
          </div>
        </div>

        <div class="demo-info">
          <h4>💡 路径选择建议</h4>
          <p>• <strong>PC端集成：</strong>使用 <code>/chat/chat</code> 路径，提供完整的功能体验</p>
          <p>• <strong>移动端集成：</strong>使用 <code>/embed-chat</code> 路径，界面更适合移动设备</p>
          <p>• <strong>混合集成：</strong>根据设备类型动态选择路径，提供最佳用户体验</p>
          <p>• <strong>安全说明：</strong>两种路径都支持token参数认证，确保安全访问</p>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="demo-section">
        <h2>📖 使用说明</h2>
        <div class="demo-info">
          <h4>🌟 新版本特点</h4>
          <p>• <strong>纯CSS图标</strong>：不依赖任何图片文件，加载更快</p>
          <p>• <strong>4种图标风格</strong>：机器人、对话气泡、AI文字、智慧大脑</p>
          <p>• <strong>3种主题模式</strong>：渐变、纯色、轮廓</p>
          <p>• <strong>波纹扩散效果</strong>：醒目的三层波纹动画，提升用户注意力</p>
          <p>• <strong>右下角浮窗</strong>：聊天窗口从右下角弹出，不影响页面操作</p>
          <p>• <strong>灵活配置</strong>：支持自定义窗口尺寸、位置偏移等</p>
          <p>• <strong>动画效果</strong>：眨眼、打字、脉冲等精美动画</p>
          <p>• <strong>响应式设计</strong>：完美适配桌面和移动设备</p>
        </div>

        <div class="demo-info">
          <h4>💡 集成代码</h4>
          <p>在您的网站中添加以下代码(一定要记得设置baseUrl属性哦)：</p>
          <p><code>&lt;script src="ai-assistant-widget-v2.js"&gt;&lt;/script&gt;</code></p>
          <p><strong>基础配置：</strong></p>
          <p><code>AIAssistant.init({ token: 'your_token', iconType: 'robot' });</code></p>
          <p><strong>完整配置：</strong></p>
          <p><code>AIAssistant.init({</code></p>
          <p><code>&nbsp;&nbsp;token: 'your_token',</code></p>
          <p><code>&nbsp;&nbsp;iconType: 'robot',</code></p>
          <p><code>&nbsp;&nbsp;modalWidth: 1100,</code></p>
          <p><code>&nbsp;&nbsp;modalHeight: 800,</code></p>
          <p><code>&nbsp;&nbsp;offset: { x: 40, y: 40 }</code></p>
          <p><code>});</code></p>
        </div>

        <div class="demo-info">
          <h4>🎯 推荐配置</h4>
          <p>• <strong>客服场景</strong>：使用对话气泡图标 + 绿色渐变</p>
          <p>• <strong>技术产品</strong>：使用机器人图标 + 蓝紫渐变</p>
          <p>• <strong>AI应用</strong>：使用AI文字 + 紫色纯色</p>
          <p>• <strong>教育平台</strong>：使用大脑图标 + 橙色轮廓</p>
        </div>
      </div>
    </div>

    <!-- 引入AI助理组件 -->
    <script src="ai-assistant-widget-v2.js"></script>

    <script>
      let currentAssistant = null

      // 更新状态显示
      function updateStatus(active = false) {
        const status = document.getElementById('currentStatus')
        if (active) {
          status.className = 'status-indicator status-active'
          status.innerHTML = '<div class="status-dot"></div><span>运行中</span>'
        } else {
          status.className = 'status-indicator status-inactive'
          status.innerHTML = '<div class="status-dot"></div><span>未初始化</span>'
        }
      }

      // 更新大小显示
      function updateSizeDisplay(value) {
        document.getElementById('sizeDisplay').textContent = value + 'px'
      }

      // 基础初始化
      function initBasic() {
        document.getElementById('token').value = localStorage.getItem('token')
        const token = document.getElementById('token').value
        if (!token) {
          alert('请输入访问令牌')
          return
        }

        destroyAssistant()

        try {
          currentAssistant = AIAssistant.init({
            token: token,
            datasetId: document.getElementById('datasetId').value || null,
            onReady: () => {
              updateStatus(true)
              console.log('AI助理已初始化')
            },
          })
        } catch (error) {
          alert('初始化失败: ' + error.message)
        }
      }

      // 更新位置
      function updatePosition() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }

        const position = document.getElementById('position').value
        const size = parseInt(document.getElementById('size').value)
        const offsetX = parseInt(document.getElementById('offsetX').value)
        const offsetY = parseInt(document.getElementById('offsetY').value)

        currentAssistant.updateConfig({
          position: position,
          size: size,
          offset: { x: offsetX, y: offsetY },
        })
      }

      // 更新模态窗口尺寸
      function updateModalSize() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }

        const modalWidth = parseInt(document.getElementById('modalWidth').value)
        const modalHeight = parseInt(document.getElementById('modalHeight').value)

        currentAssistant.updateConfig({
          modalWidth: modalWidth,
          modalHeight: modalHeight,
        })
      }

      // 应用预设
      function applyPreset(iconType, theme, primaryColor, secondaryColor) {
        // 更新表单
        document.getElementById('iconType').value = iconType
        document.getElementById('theme').value = theme
        document.getElementById('primaryColor').value = primaryColor
        if (secondaryColor) {
          document.getElementById('secondaryColor').value = secondaryColor
        }

        // 高亮选中的预设
        document.querySelectorAll('.preset-card').forEach((card) => {
          card.classList.remove('active')
        })
        event.currentTarget.classList.add('active')

        // 应用配置
        const token = document.getElementById('token').value
        if (!token) {
          alert('请先输入访问令牌')
          return
        }

        destroyAssistant()

        try {
          currentAssistant = AIAssistant.init({
            token: token,
            datasetId: document.getElementById('datasetId').value || null,
            iconType: iconType,
            theme: theme,
            primaryColor: primaryColor,
            secondaryColor: secondaryColor,
            position: document.getElementById('position').value,
            size: parseInt(document.getElementById('size').value),
            offset: {
              x: parseInt(document.getElementById('offsetX').value),
              y: parseInt(document.getElementById('offsetY').value),
            },
            modalWidth: parseInt(document.getElementById('modalWidth').value),
            modalHeight: parseInt(document.getElementById('modalHeight').value),
            onReady: () => {
              updateStatus(true)
            },
          })
        } catch (error) {
          alert('应用预设失败: ' + error.message)
        }
      }

      // 更新主题
      function updateTheme() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }

        const theme = document.getElementById('theme').value
        const iconType = document.getElementById('iconType').value
        const primaryColor = document.getElementById('primaryColor').value
        const secondaryColor = document.getElementById('secondaryColor').value
        const tooltip = document.getElementById('tooltip').value

        currentAssistant.updateConfig({
          theme: theme,
          iconType: iconType,
          primaryColor: primaryColor,
          secondaryColor: secondaryColor,
          tooltip: tooltip,
          draggable: document.getElementById('draggable').checked,
          showBadge: document.getElementById('showBadge').checked,
        })
      }

      // 显示徽章测试
      function showBadgeTest() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }
        currentAssistant.showBadge(5)
      }

      // 隐藏徽章测试
      function hideBadgeTest() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }
        currentAssistant.hideBadge()
      }

      // 切换显示
      function toggleAssistant() {
        if (!currentAssistant) {
          alert('请先初始化AI助理')
          return
        }
        currentAssistant.toggle()
      }

      // 销毁助理
      function destroyAssistant() {
        if (currentAssistant) {
          currentAssistant.destroy()
          currentAssistant = null
          updateStatus(false)
        }
              }

      // 更新PC端URL示例
      function updatePcExample() {
        const token = document.getElementById('token').value || 'your_token_here'
        const datasetId = document.getElementById('datasetId').value || 'your_dataset_id'
        const baseUrl = window.location.origin
        const url = `${baseUrl}/chat/chat?token=${token}&dataset_id=${datasetId}`
        document.getElementById('pcUrlExample').textContent = url
      }

      // 更新移动端URL示例
      function updateMobileExample() {
        const token = document.getElementById('token').value || 'your_token_here'
        const datasetId = document.getElementById('datasetId').value || 'your_dataset_id'
        const baseUrl = window.location.origin
        const url = `${baseUrl}/embed-chat?token=${token}&dataset_id=${datasetId}`
        document.getElementById('mobileUrlExample').textContent = url
      }

      // 复制文本到剪贴板
      function copyToClipboard(elementId) {
        const text = document.getElementById(elementId).textContent
        if (navigator.clipboard) {
          navigator.clipboard.writeText(text).then(() => {
            alert('URL已复制到剪贴板！')
          }).catch(err => {
            console.error('复制失败:', err)
            // 降级处理
            fallbackCopyTextToClipboard(text)
          })
        } else {
          // 旧版浏览器兼容
          fallbackCopyTextToClipboard(text)
        }
      }

      // 降级复制方法
      function fallbackCopyTextToClipboard(text) {
        const textArea = document.createElement('textarea')
        textArea.value = text
        textArea.style.position = 'fixed'
        textArea.style.left = '-999999px'
        textArea.style.top = '-999999px'
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        try {
          document.execCommand('copy')
          alert('URL已复制到剪贴板！')
        } catch (err) {
          console.error('复制失败:', err)
          alert('复制失败，请手动复制URL')
        }
        document.body.removeChild(textArea)
      }

      // 页面加载完成后自动初始化一个示例
      window.addEventListener('load', function () {
        setTimeout(() => {
          initBasic()
          // 初始化URL示例
          updatePcExample()
          updateMobileExample()
        }, 1000)
      })
    </script>
  </body>
</html>
